---
title: Events
sidebar_position: 5
---

## Whole-Tree Events

The `TreeView` object exposes 2 events that communicate changes that affect the whole tree.

`rootChanged` fires when the contents of the root field (the field that contains the root node) change.
That is, if a new root node is assigned or the schema changes.
This will not fire when the node itself changes.

`commitApplied` fires whenever a change is applied outside of a transaction or when a transaction is committed.
This is used to get `Revertible` objects to put on the undo or redo stacks.
See [undo redo support](./undo-redo.mdx) and [Transactions](./transactions.mdx).

Here is an example of how to subscribe to one of these events:

```typescript
const unsubscribe = treeView.events.on("rootChanged", () => {...});

// Later at some point when the event subscription is not needed anymore
unsubscribe();
```

## Node-Level Events

`SharedTree` supports two node-level events: `nodeChanged` and `treeChanged`.
These can be subscribed to using the `Tree.on` method, which has the following signature:

```typescript
on<K extends keyof TreeChangeEvents>(
		node: TreeNode,
		eventName: K,
		listener: TreeChangeEvents[K],
	): () => void;
```

`Tree.on` assigns the specified `listener` function to the specified `eventName` for the specified `node`.
The `node` can be any node of the tree.

The `eventName` can be either `"treeChanged"` or `"nodeChanged"`:

-   `nodeChanged` fires whenever one or more properties of the specified node change.
-   `treeChanged` fires whenever one or more properties of the specified node or any node in its subtree, change.

We recommend looking at the documentation of each of the events for more details.

The `Tree.on()` method returns a function that unsubscribes the handler from the event. This method is typically called in clean up code when the node is being removed. For example:

```typescript
const unsubscribe = Tree.on(myTreeNode, "nodeChanged", () => {...});

// Later at some point when the event subscription is not needed anymore
unsubscribe();
```
